<!--[if IE 7]>
<!DOCTYPE>
<html lang="en">
	<head>
<![endif]-->
<!--[if IE 8]>
<!DOCTYPE>
<html lang="en">
    <head>
           <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
<![endif]-->
<![if gte IE 9]>
<!DOCTYPE HTML>
<html lang="en">
	<head>
<![endif]>	 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Testing Axes</title>
<style type="text/css">
	@import "../../../../dojo/resources/dojo.css";
	@import "../../../../dijit/tests/css/dijitTests.css";
</style>
<script type="text/javascript" src="../../../../dojo/dojo.js" data-dojo-config="async: true, isDebug: true, has:{'dojo-bidi': true}"></script>
<script type="text/javascript">
var chart1a, chart1b;
function rotationXChanged(value){
	value = parseInt(value);
	chart1a.getAxis("x").opt.rotation = value;
	chart1a.dirty = true;
	chart1a.setDir("rtl").render();
	chart1b.getAxis("x").opt.rotation = value;
	chart1b.dirty = true;
	chart1b.setDir("rtl").render();
}
function rotationYChanged(value){
	value = parseInt(value);
	chart1a.getAxis("y").opt.rotation = value;
	chart1a.dirty = true;
	chart1a.setDir("rtl").render();
	chart1b.getAxis("y").opt.rotation = value;
	chart1b.dirty = true;
	chart1b.setDir("rtl").render();
}
require(["dojo/ready", "dojox/charting/Chart", "dojox/charting/axis2d/Default",
	"dojox/charting/plot2d/Markers", "dojox/charting/action2d/MouseZoomAndPan", "dojox/charting/Theme"],
		function(ready, Chart, Default, Markers,
			MouseZoomAndPan, Theme){
	ready(function(){

		var myLabelFunc = function(text, value){
			return text+" make it even longer";
		};
		chart1a = new Chart("test1a").
        	    addAxis("x", {fixLower: "major", fixUpper: "major", natural: true, includeZero: true, font: "14px helvetica",
					minorTickStep: 0.5, labelFunc: myLabelFunc, rotation: 30}).
    	        addAxis("y", {vertical: true, fixLower: "major", fixUpper: "major", natural: true, includeZero: true, labelFunc: myLabelFunc}).
        	    addPlot("default", {type: Markers}).
	            addSeries("Series A", [{x: 1, y: 1}, {x: 2, y: 2}, {x: 3, y: 1}]).
    	        addSeries("Series B", [{x: 3, y: 2}, {x: 4, y: 3}, {x: 5, y: 2}]).
        	    addSeries("Series C", [{x: 5, y: 3}, {x: 6, y: 4}, {x: 7, y: 3}]).
           		setDir("rtl").render();
		new MouseZoomAndPan(chart1a);

		chart1b = new Chart("test1b").
        	    addAxis("x", {fixLower: "major", fixUpper: "major", natural: true, includeZero: true, font: "14px helvetica",
					minorTickStep: 0.5, labelFunc: myLabelFunc, rotation: 30, leftBottom: false}).
    	        addAxis("y", {vertical: true, fixLower: "major", fixUpper: "major", natural: true, includeZero: true, labelFunc: myLabelFunc, leftBottom: false}).
        	    addPlot("default", {type: Markers}).
	            addSeries("Series A", [{x: 1, y: 1}, {x: 2, y: 2}, {x: 3, y: 1}]).
    	        addSeries("Series B", [{x: 3, y: 2}, {x: 4, y: 3}, {x: 5, y: 2}]).
        	    addSeries("Series C", [{x: 5, y: 3}, {x: 6, y: 4}, {x: 7, y: 3}]).
           		setDir("rtl").render();
		new MouseZoomAndPan(chart1b);

		var chart2 = new Chart("test2").
        	    addAxis("x", {fixLower: "major", fixUpper: "major", natural: true, includeZero: true, font: "14px helvetica",
					majorTickStep: 2, minorTickStep: 1,
						labels: [ {value: 0, text:"this is a very very long label"},
							{ value: 1, text:"sm"},
							{ value: 2, text:"short" },
							{ value: 3, text: "minor" },
							{ value: 4, text:"la" },
							{ value: 5, text: "label" },
							{ value: 6, text: "el" }
						]}).
            	addAxis("y", {vertical: true, fixLower: "major", fixUpper: "major", natural: true, includeZero: true}).
            	addPlot("default", {type: Markers}).
            	addSeries("Series A", [{x: 0, y: 1}, {x: 2, y: 2}, {x: 4, y: 1}]).
            	addSeries("Series B", [{x: 2, y: 2}, {x: 4, y: 3}, {x: 6, y: 2}]).
            	addSeries("Series C", [{x: 4, y: 3}, {x: 6, y: 4}, {x: 8, y: 3}]).
            	setDir("rtl").render();
		new MouseZoomAndPan(chart2);


		var chart3 = new Chart("test3").
        	    addAxis("x", {fixLower: "major", fixUpper: "major", natural: true, includeZero: true, font: "14px helvetica",
					majorTickStep: 0.5, minorTickStep: 0.1 }).
            	addAxis("y", {vertical: true, fixLower: "major", fixUpper: "major", natural: true, includeZero: true}).
            	addPlot("default", {type: Markers}).
            	addSeries("Series A", [{x: 1, y: 1}, {x: 2, y: 2}, {x: 3, y: 1}]).
            	addSeries("Series B", [{x: 5, y: 2}, {x: 6, y: 3}, {x: 7, y: 2}]).
            	addSeries("Series C", [{x: 9, y: 3}, {x: 10, y: 4}, {x: 11, y: 3}]).
           		setDir("rtl").render();
		new MouseZoomAndPan(chart3);
	});
});
</script>
</head>
<body>
<h1>Testing Axes drop labels</h1>
<p>1: Axes with rotation & labelFunc</p>
X Axis Label Rotation: <input onchange="rotationXChanged(this.value)" value="30"/>
Y Axis Label Rotation: <input onchange="rotationYChanged(this.value)" value="0"/>
<div id="test1a" style="width: 600px; height: 400px;"></div>
<div id="test1b" style="width: 600px; height: 400px;"></div>
<p>2: Axes with labels array.</p>
<div id="test2" style="width: 600px; height: 200px;"></div>
<p>3: Numeric axis.</p>
<div id="test3" style="width: 320px; height: 180px;"></div>
<p>That's all Folks!</p>
</body>
</html>
